<template>
    <!-- 修改资料 -->

    <div>
        <el-form label-width="100px" :model="form" label-position="right" ref="formRef" :rules="formRules">
            <el-card>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="出差时间" prop="visitDateTime">
                            <el-date-picker v-model="form.visitDateTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                                placeholder="请选择" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="出差计划记录">
                            <sc-table-select v-model="travelPlan" inputWidth="400" :fileName="fileName" :apiObj="apiObj"
                                :table-width="700" :props="travelPlanProps" @change="travelPlanChange" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="系统提醒">
                            <el-select v-model="form.visitObjectKind" clearable placeholder="请选择：">
                                <el-option v-for="item in configData.visitObjectKindList" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="客户名称">
                            <el-input v-model="form.custName" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="客户联系人">
                            <el-input v-model="form.custMan"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="联系电话">
                            <el-input v-model="form.custPhone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="类型">
                            <el-select v-model="form.visitType" clearable placeholder="请选择：">
                                <el-option v-for="item in configData.visitTypeList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card style="margin-top: 10px;">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="基本信息" name="first">
                        <el-row>
                            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                <el-form-item label="场所">
                                    <el-input v-model="form.exchangePlace"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                <el-form-item label="客户出席者">
                                    <el-input v-model="form.custAttendant" type="textarea"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                <el-form-item label="公司出席者">
                                    <sc-table-select :inputWidth="600" v-model="form.accompaniedList" multiple
                                        :apiObj="apiObj" :fileName="accompaniedFileName" :table-width="700"
                                        :props="tableProps" max-collapse-tags="6">
                                    </sc-table-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                <el-form-item label="业务员">
                                    <el-input v-model="form.employeeName" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-table v-if="dataList.length > 0" :data="dataList" :span-method="arraySpanMethod" border
                            style="width: 100%">
                            <el-table-column label="项目" prop="contentKindName" width="120"></el-table-column>
                            <el-table-column label="操作" width="120">
                                <template #default="scope">
                                    <div style="display: flex;flex-direction: column;align-items: baseline">
                                        <el-button :icon="Plus" size="small" @click="addRow(scope)">添加</el-button>
                                        <el-button :icon="Delete" size="small" @click="deleteRow(scope)">删除</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="商洽事项" width="500">
                                <template #default="scope">
                                    <el-input v-model="scope.row.content" type="textarea"
                                        :autosize="{ minRows: 2 }"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="担当" width="400">
                                <template #default="scope">
                                    <sc-table-select :inputWidth="360" v-model="scope.row.accompaniedList" multiple
                                        :apiObj="apiObj" :fileName="accompaniedFileName" :table-width="700"
                                        :props="tableProps" max-collapse-tags="3" @closeUpdate="accompaniedChange">
                                    </sc-table-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="期限">
                                <template #default="scope">
                                    <el-date-picker v-model="scope.row.writeDate" type="date" placeholder="请选择日期"
                                        value-format="YYYY-MM-DD" @change="dateChange" />
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="报告附件" name="third">
                        <tsMultiple v-model="dtlList" :addTemplate="addTemplate" :apiObj="apiObj"
                            @updateIndex="updateIndex">
                            <template #tableContent>
                                <el-table-column label="图片" width="100">
                                    <template #default="scope">
                                        <el-image v-if="checkType(scope.row) == 'image'" alt="上传图片"
                                            :src="scope.row.fileFullPath"
                                            @click="openDialog(scope.row.fileFullPath)"></el-image>
                                        <video v-else-if="checkType(scope.row) == 'video'" :src="scope.row.fileFullPath"
                                            controls style="width: 100%;height: 100%;"></video>
                                        <span v-else>{{ scope.row.fileName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="fileKind" label="类别">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.fileKind">
                                            <el-option v-for="item in configData.fileKindList" :key="item.value"
                                                :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="itemIndex" label="排序">
                                    <template #default="scope">
                                        <el-input-number v-model="scope.row.itemIndex" :min="1"></el-input-number>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="remark" label="备注">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.remark"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="是否需要发送邮件">
                                    <template #default="scope">
                                        <el-switch v-model="scope.row.needSendEmail" active-value="1" inactive-value="0"></el-switch>
                                    </template>
                                </el-table-column>
                                
                            </template>
                        </tsMultiple>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
            <el-card style="margin-top: 10px;">
                <el-row v-if="form.isSendEmail == '1'">
                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :offset="4">
                        <el-form-item label="发送邮件标题" prop="sendEmailTitle">
                            <el-input v-model="form.sendEmailTitle"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col  :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
                        <el-form-item label="邮件提醒" prop="isSendEmail">
                            <el-switch v-model="form.isSendEmail" active-value="1" inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="form.isSendEmail == '1'" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <el-form-item label="收件人" prop="mailto">
                            <el-input v-model="form.mailto"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="form.isSendEmail == '1'">
                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :offset="4">
                        <el-form-item label="抄送者邮箱" prop="mailcopy">
                            <el-input v-model="form.mailcopy"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="form.isSendEmail == '1'">
                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :offset="4">
                        <el-form-item label="密件抄送邮箱" prop="mailBcc">
                            <el-input v-model="form.mailBcc"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注">
                    <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2 }"></el-input>
                </el-form-item>
            </el-card>
        </el-form>

        <div class="button-position" style="margin-top: 5px;">
            <el-button @click="updateVisible">取 消</el-button>
            <el-button @click="add(formRef)" type="primary">确 定</el-button>
        </div>
        <el-dialog v-model="dialogVisible">
            <img :src="dialogImageUrl" alt="Preview Image" w-full style="width: 100%;" />
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch } from 'vue';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus';
import Api from '@/api/model/trip'
import sysApi from '@/api/model/system'
import tsMultiple from '@/components/tsUpload/multipe.vue'
import { checkType } from '@/utils/checkType.js'
import { deepClone } from '@/utils/arr.js'
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
// 添加用户数据的对象
const form = ref({})
const dtlList = ref([])
const addTemplate = ref()
const content = ref({})
const configData = ref({})
const dataList = ref([])
const travelPlan = ref({
    id: '',
    number: ''
})
const apiObj = ref(sysApi.select.query)
const fileName = ref('FilloutEmployeeVistReport')
const activeName = ref('first')
const dialogVisible = ref(false)
const dialogImageUrl = ref('')
const formRef = ref()
const travelPlanProps = {
    value: 'id',
    label: 'number'
}
const accompaniedFileName = ref('ChooseEmployeeReport')
const tableProps = {
    value: 'id',
    label: 'name'
}
const formRules = reactive({
    number: [
        { required: true, message: "请输入编号", trigger: "blur" }
    ]
})
onMounted(() => {
    getInit()
})
const getInit = async (val) => {
    let param = {}
    if (val) {
        param = {
            id: val
        }
    }
    else {
        param = props.paramsData
    }

    let res = await Api.visit.add.post(param)
    console.log(res)
    if (res.code == '200') {
        form.value = res.data
        configData.value = res.configData
        dataList.value = res.dataList
        addTemplate.value = res.file
        content.value = res.content
        travelPlan.value.id = res.data.travelPlanId
        travelPlan.value.number = res.data.travelPlanNumber
    }
}
const travelPlanChange = (val) => {
    if (val) {
        form.value.travelPlanId = val.id
        form.value.travelPlanNumber = val.number
        getInit(val.id)
    }
}
const openDialog = (val) => {
    dialogImageUrl.value = val
    dialogVisible.value = true
}
const updateIndex = () => {
    dtlList.value.forEach((item, index) => {
        item.itemIndex = index + 1
    })
}
const accompaniedChange = (val) => {
    dataList.value.forEach(item => {
        if (item.accompaniedList.length == 0) {
            item.accompaniedList = val
        }
    })
}
const dateChange = (val) => {
    dataList.value.forEach(item => {
        console.log(item.writeDate)
        if (item.writeDate == '') {
            item.writeDate = val
        }
    })
}
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    const fields = ['contentKindName']
    // 当前行的数据
    const cellValue = row[column.property]
    // 判断只合并定义字段的列数据
    if (cellValue && fields.includes(column.property)) {
        const prevRow = dataList.value[rowIndex - 1] //上一行数据
        let nextRow = dataList.value[rowIndex + 1] //下一行数据
        // 当上一行的数据等于当前行数据时，当前行单元格隐藏
        if (prevRow && prevRow[column.property] === cellValue) {
            return { rowspan: 0, colspan: 0 }
        } else {
            // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格
            let countRowspan = 1 //用于合并计数多少单元格
            while (nextRow && nextRow[column.property] === cellValue) {
                nextRow = dataList.value[++countRowspan + rowIndex]
            }
            if (countRowspan > 1) {
                return { rowspan: countRowspan, colspan: 1 }
            }
        }
    }
}
const addRow = (scope) => {
    let row = deepClone(content.value)
    row.operationType = 'add'
    row.contentKindName = scope.row.contentKindName
    row.accompaniedList = scope.row.accompaniedList
    row.writeDate = scope.row.writeDate
    dataList.value.splice(scope.$index, 0, row)
}
const deleteRow = (scope) => {
    dataList.value.splice(scope.$index, 1)
}
const updateVisible = (val) => {
    emit('updatetable')
}
const add = async (formRef) => {
    await formRef.validate((valid, fields) => {
        if (valid) {
            addData();
        }
    })
}
const addData = async () => {
    let params = {
        bean: form.value,
        dataList: dataList.value,
        dtlList: dtlList.value
    }
    var res = await Api.visit.save.post(params);
    if (res.code == 200) {
        ElNotification.success({ title: '', message: '新增成功！', duration: 2000 });
        emit('updatetable', true);
    }
}


</script>
<style lang="less" scoped></style>



